<template>
    <div>
        <el-input
            size="small"
            placeholder="请输入角色英文名"
            v-model="role.name"
            clearable
            style="width: 300px"
        >
            <template slot="prepend">ROLE_ </template>
        </el-input>
        <el-input
            size="small"
            placeholder="请输入角色中文名"
            v-model="role.nameZh"
            clearable
            style="margin-left: 6px; margin-right: 6px; width: 300px"
            @keydown.enter.native="addRole"
        >
        </el-input>
        <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="addRole"
            >添加</el-button
        >
        <el-collapse accordion v-model="activityName" @change="change">
            <el-collapse-item
                :title="item.nameZh"
                :name="item.id"
                v-for="(item, index) in roles"
                :key="index"
            >
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>可访问资源</span>
                        <el-button
                            style="float: right; padding: 3px 0; color: #ff0000"
                            icon="el-icon-delete"
                            type="text"
                            @click="deleteHandle(item)"
                            >删除角色</el-button
                        >
                    </div>
                    <div>
                        <el-tree
                            show-checkbox
                            ref="tree"
                            :data="allMenus"
                            :props="defaultProps"
                            :key="index"
                            :default-checked-keys="selectedMenus"
                            node-key="id"
                        ></el-tree>
                        <div style="display: flex; justify-content: flex-end">
                            <el-button
                                size="mini"
                                @click="
                                    activityName = -1;
                                    selectedMenus = [];
                                "
                                >取消修改</el-button
                            >
                            <el-button
                                type="warning"
                                size="mini"
                                @click="updatePermission(item.id, index)"
                                >确认修改</el-button
                            >
                        </div>
                    </div>
                </el-card>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 添加角色
            role: {
                name: "",
                nameZh: "",
            },
            // 所有角色
            roles: [],
            // 权限菜单
            allMenus: [],
            // 绑定树形控件
            defaultProps: {
                label: "name",
                children: "children",
            },
            // 所选角色菜单
            selectedMenus: [],
            // 默认选择的手风琴
            activityName: -1,
        };
    },
    created() {
        this.initRoles();
    },
    methods: {
        // 初始化数据
        initRoles() {
            this.getRequest("/system/basic/permission/role/getAllRoles").then(
                (res) => {
                    if (res) {
                        this.roles = res;
                    }
                }
            );
        },
        // 手风琴事件
        change(roleId) {
            if (roleId) {
                this.initAllMenu();
                this.initSelectedMenu(roleId);
            }
        },
        // 初始化菜单
        initAllMenu() {
            this.getRequest("/system/basic/permission/getAllMenus").then(
                (res) => {
                    if (res) {
                        this.allMenus = res;
                    }
                }
            );
        },
        initSelectedMenu(roleId) {
            this.getRequest(
                "/system/basic/permission/getMenuIdByRoleId/" + roleId
            ).then((res) => {
                if (res) {
                    this.selectedMenus = res;
                }
            });
        },
        // 修改角色权限
        updatePermission(id, index) {
            // 获取当前属性对象
            let tree = this.$refs.tree[index];
            // 获得每行被选中的节点值，传入true，意思是只会将子树上选中的id加入数组中
            let selectedKeys = tree.getCheckedKeys(true);
            let url = "/system/basic/permission/updateMenuRole?roleId=" + id;
            if (selectedKeys) {
                selectedKeys.forEach((item, index) => {
                    url += "&menuIds=" + item;
                });
            }
            this.putRequest(url).then((res) => {
                if (res) {
                    this.initRoles();
                    // 关闭手风琴
                    this.activityName = -1;
                }
            });
        },
        // 添加角色权限
        addRole() {
            if (!this.role.name || !this.role.nameZh) {
                return this.$message.error(
                    "请将角色英文名和角色中文名填写完整"
                );
            }
            this.postRequest(
                "/system/basic/permission/role/addRole",
                this.role
            ).then((res) => {
                if (res) {
                    this.role.name = "";
                    this.role.nameZh = "";
                    this.initRoles();
                }
            });
        },
        // 删除角色
        deleteHandle(role) {
            this.$confirm(
                "此操作将永久删除该【" + role.nameZh + "】角色, 是否继续 ? ",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    this.deleteRequest(
                        "/system/basic/permission/role/deleteRole/" + role.id
                    ).then((resp) => {
                        if (resp) {
                            this.initRoles();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style scoped>
.el-collapse {
    margin-top: 15px;
}
</style>